<template>
  <div class="flex w-full h-16 justify-around items-center text-center text-gray-300 mb-2 header">
    <!--    <img class="w-full h-20" :src="headerImg" alt="DashboardTitle" />-->
    <div class="opacity-0 w-1/3">左侧功能</div>
    <div class="text-4xl font-bold w-1/3">{{ title }}</div>
    <!--    计时器   -->
    <div class="text-2xl mt-8 pr-5 w-1/3 text-right">
      {{ dateTime }}<span class="ml-5 text-xl">{{ dateDay }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onBeforeUnmount, onMounted, ref } from "vue";

// 使用 defineProps 定义组件的 props
const props = defineProps({
  headerImg: {
    type: String,
    default: "src/assets/static/images/53titlebg.png" // 默认背景图片路径
  },
  title: {
    type: String,
    default: "数据大屏标题" // 默认标题
  }
});

// 计时器参数
const weekday = ref<string[]>([
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六"
]);
const dateTime = ref<string>("");
const dateDay = ref<string>("");
const dateTimer = ref<any>({});
const timeInterval = () => {
  dateTimer.value = setInterval(() => {
    const nowDate = new Date();
    dateTime.value = nowDate.toLocaleString("zh-CN", {
      timeZone: "Asia/Shanghai"
    });
    dateDay.value = weekday.value[nowDate.getDay()];
  }, 1000);
};

onMounted(() => {
  timeInterval();
});

onBeforeUnmount(() => {
  clearInterval(dateTimer.value);
  dateTimer.value = null;
});
</script>
<style scoped lang="scss">
</style>
